<template>
	<view class="container">
		<u-navbar title=" " :background="{ background: $setting.colorTheme() }" :border-bottom="false" :is-back="false">
			<view class="navbar-title">购物车</view>
		</u-navbar>
		
		<view class="manage flex-space-between bg-fff">
			<view>已选{{handleNum()}}件商品</view>
			<view>
				<text v-show="is_delete == 1" @click="handleClear">清空购物车</text>
				<text v-show="is_delete == 1" style="margin-left: 30rpx;" @click="handleDelete">删除</text>
				<text v-show="is_delete == 1" style="margin-left: 30rpx;" @click="is_delete = 0">完成</text>
				<text v-show="is_delete == 0" @click="is_delete = 1">管理</text>
			</view>
		</view>
		
		<view class="cart">
			<view class="cart-item bg-fff" v-for="(item,index) in cartList" :key="index">
				<!-- <view class="crat-item-shop flex-align-center">
					<u-checkbox shape="circle" :active-color="$setting.colorTheme()" v-model="item.is_checked" @change="checkboxItemChange(item)"></u-checkbox>
					<view>{{item.supplier.name}}</view>
				</view> -->
				<view class="crat-item-product flex-align-center" v-for="(it,idx) in item.productList" :key="idx">
					<u-checkbox shape="circle" :active-color="$setting.colorTheme()" v-model="it.is_checked" :name="index" @change="checkboxItChange"></u-checkbox>
					<image class="crat-product-image" :src="it.product_image" @click="jump('/pages/categoty/product/product?id='+it.product_id)"></image>
					<view class="crat-product-con">
						<view class="crat-product-name u-line-1" @click="jump('/pages/categoty/product/product?id='+it.product_id)">{{it.product_name}}</view>
						<view class="crat-product-sku u-line-1">{{it.product_sku.product_attr}}</view>
						<view class="crat-product-price flex-space-between">
							<view>￥{{it.product_price}}</view>
							<view class="b-number-box">
								<u-number-box v-model="it.total_num" :min="1" :max="it.product_sku.stock_num" disabled-input :long-press="false" @minus="numberMinus(it)" @plus="numberPlus(it)"></u-number-box>
								<!-- <b-number-box v-model="it.total_num" :max="it.product_sku.stock_num" @minus="numberMinus(it)" @plus="numberPlus(it)"></b-number-box> -->
							</view>
						</view>
					</view>
				</view>
				<view class="crat-item-settle flex-align-center">
					<view class="flex-align-center crat-item-settle-price">
						<view>合计：</view>
						<text>¥{{handleShopTotal(item)}}</text>
					</view>
					<b-u-button-theme width="232rpx" height="72rpx" size="28rpx" @click="send(item)">结算({{handleShopNum(item)}})</b-u-button-theme>
				</view>
			</view>
		</view>
		
		<view style="padding-top: 100rpx;" v-if="cartList.length == 0">
			<u-empty text="购物车空空如也" mode="car"></u-empty>
		</view>
		
<BusinessBox :businessshow="checkbusiness" :businesstxt="businesstxt"></BusinessBox>
	</view>
</template>

<script>


export default {
	data() {
		return {
			cartList: [],
			is_delete: 0,
			userInfo: {},
checkbusiness:true,
			businesstxt:'',
			share:{
					title: '',
					imageUrl:'',
            	},
		}
	},
	onLoad() {
		this.getConfigDataDetail()
	},
	onShow() {
		this.getHttp();
	},
	methods: {
		getConfigDataDetail(){
				let params = {
					page_type:'cart'
				}
				uni.$u.api.getConfigDataDetail(params).then(res => {
					let Detail =  res.data
					this.share.title = Detail.content
					this.share.imageUrl = Detail.image
				})
			},
		jump(url) {
				uni.navigateTo({
					url: url
				})
			},
getCityBusiness() {
			let self = this;
			uni.$u.api.getCityBusiness({}).then(function(res){
				self.checkbusiness = res.checkbusiness
				self.businesstxt = res.businesstxt
			})
		},
		handleShopTotal(item) {
			let total = 0;
			item.productList.forEach((it,idx) => {
				if(it.is_checked == true) {
					total = (total * 100 + Number(it.product_sku.product_price) * Number(it.total_num) * 100) / 100
				}
			})
			return total;
		},
		handleShopNum(item) {
			let num = 0;
			item.productList.forEach((it,idx) => {
				if(it.is_checked == true) {
					num++;
				}
			})
			return num;
		},
		handleNum() {
			let num = 0;
			this.cartList.forEach((item,index) => {
				item.productList.forEach((it,idx) => {
					if(it.is_checked == true) {
						num++;
					}
				})
			})
			
			return num;
		},
		handleClear() {
			uni.showModal({
				title: '提示',
				content: '确定清空购物车？',
				success: (res) => {
					if (res.confirm) {
						let ids = [];
						this.cartList.forEach((item,index) => {
							item.productList.forEach((it,idx) => {
								ids.push(it.cart_id);
							})
						})
						
						uni.$u.api.postCartDelete({
							cart_id: ids.join(','),
						}).then(res => {
							this.getHttp();
						})
						
						// console.log('用户点击确定');
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		handleDelete() {
			let ids = [];
			this.cartList.forEach((item,index) => {
				item.productList.forEach((it,idx) => {
					if(it.is_checked == true) {
						ids.push(it.cart_id);
					}
				})
			})
			if(ids.length == 0) {
				uni.showToast({
					title: "未选择商品",
					icon: "none"
				})
			} else {
				uni.$u.api.postCartDelete({
					cart_id: ids.join(','),
				}).then(res => {
					this.getHttp();
				})
			}
		},
		send(item) {
			if(uni.$u.test.isEmpty(this.userInfo.userInfo.mobile)) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
				return;
			}
			
			let ids = [];
			item.productList.forEach((it,idx) => {
				if(it.is_checked == true) {
					ids.push(it.cart_id);
				}
			})
			
			if(ids.length == 0) {
				uni.showToast({
					title: "未选择商品",
					icon: "none"
				})
			} else {
				uni.navigateTo({
					url: '/pages/cart/settle/settle?order_type=cart&cart_ids='+ids.join(','),
				})
			}
		},
		checkboxItChange(e) {
			setTimeout(() => {
				let item_checked = true;
				this.cartList[e.name].productList.forEach((it,idx) => {
					if(it.is_checked == false) {
						item_checked = false;
					}
				})
				
				this.cartList[e.name].is_checked = item_checked;
			}, 50)
		},
		checkboxItemChange(item) {
			item.productList.forEach((it,idx) => {
				this.$set(it, 'is_checked', !item.is_checked);
			})
		},
		numberPlus(it) {
			uni.$u.http.setConfig({showLoading: false});
			uni.$u.api.postOrderCart({
				product_id: it.product_id,
				total_num: 1,
				spec_sku_id: it.spec_sku_id,
			}).then(res => {
				uni.$u.http.setConfig({showLoading: true});
			}).catch(err => {
				uni.$u.http.setConfig({showLoading: true});
			})
		},
		numberMinus(it) {
			uni.$u.http.setConfig({showLoading: false});
			uni.$u.api.postOrderCartSub({
				product_id: it.product_id,
				spec_sku_id: it.spec_sku_id,
			}).then(res => {
				uni.$u.http.setConfig({showLoading: true});
			}).catch(err => {
				uni.$u.http.setConfig({showLoading: true});
			})
		},
		getOrderCart() {
			uni.$u.api.getOrderCart().then(res => {
				this.cartList = res.productList;
				let TabBarIOndex = this.cartList[0]?this.cartList[0].productList.length : 0
				if(this.cartList && TabBarIOndex > 0){			
					uni.setTabBarBadge({
					index: 2, 
					text: JSON.stringify(TabBarIOndex)
					})
				}else{
					uni.removeTabBarBadge({
					index: 2, 
					})
				}
				this.cartList.forEach((item,index) => {
					this.$set(item, 'is_checked', false);
					item.productList.forEach((it,idx) => {
						this.$set(it, 'is_checked', false);
					})
				})
			})
		},
		getUserInfo() {
			uni.$u.api.userInfo().then(res => {
				this.userInfo = res;
			})
		},
		getHttp() {
this.getCityBusiness();
			this.getOrderCart();
			this.getUserInfo();
		},
	},
}
</script>

<style lang="scss" scoped>
	.container {
		
		.manage {
			font-size: 28rpx;
			color: #666666;
			padding: 22rpx 32rpx;
		}
		
		.cart {
			padding: 30rpx;
			
			.cart-item {
				padding: 26rpx 34rpx;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				
				.crat-item-shop {
					font-size: 28rpx;
					color: #111111;
					margin-bottom: 44rpx;
				}
				
				.crat-item-product {
					padding-bottom: 32rpx;
					
					.crat-product-image {
						width: 128rpx;
						height: 128rpx;
					}
					
					.crat-product-con {
						margin-left: 16rpx;
						flex: 1;
						
						.crat-product-name {
							width: 410rpx;
							font-size: 28rpx;
							color: #111111;
						}
						
						.crat-product-sku {
							width: 410rpx;
							font-size: 24rpx;
							color: #999999;
						}
						
						.crat-product-price {
							color: $uni-color-theme;
							font-size: 28rpx;
							margin-top: 16rpx;
							font-weight: bold;
						}
					}
				}
				
				.crat-item-settle {
					border-top: 1px solid rgba(225, 225, 225, 0.8);
					padding-top: 28rpx;
					justify-content: flex-end;
					
					.crat-item-settle-price {
						font-size: 28rpx;
						color: #111111;
						font-weight: bold;
						margin-right: 22rpx;
						
						text {
							color: $uni-color-theme;
						}
					}
				}
			}
		}
	}
	
</style>
